<template>
  <StatisticsGrid 

     :layout-data="layout"
     @changeEchart="changeEchartFun"
     :refs="echartsRefMap"
  
  >
  <template #headerL>
   顶部左侧插槽
  </template>

  
  
  

  <template #slot_block_gvm='{item}'>
    <!-- 筛选项 -->
    <div class="filter_items">
      <el-select @change="change_echarts_data(item)" class="eCharts_select" v-model="value" placeholder="Select" style="width: 240px">
						<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value"
						:disabled="item.disabled"
						/>
			</el-select>
    </div>

   
    <div class="grid_eCharts_content" style="width: 100%; height: 100%; flex: 1">
                          <ECharts
                            v-if="item.status"
                            :ref="(el: refItem) => handleSetFromMap(el, item)"
                            :option="item.contentData.echartData"
                          ></ECharts>
    <div class="item_loading" v-else><el-icon><Loading /></el-icon></div>
                   
    </div>
  </template>


  <template #slot_block_bbb='{item}'>
    <div>
      {{ item.contentData }}
    </div>
    <div>
      <div v-if="item.status">
           开始工作了
      </div>
      <div class="item_loading" v-else><el-icon><Loading /></el-icon></div>
    </div>
  </template>



  <template #slot_block_uv='{item}'>
    <div>
      {{ item.contentData }}
    </div>
    <div class="grid_eCharts_content" style="width: 100%; height: 100%; flex: 1">
                          <ECharts
                            v-if="item.status"
                            :ref="(el: refItem) => handleSetFromMap(el, item)"
                            :option="item.contentData.echartData"
                          ></ECharts>
                          <div class="item_loading" v-else><el-icon><Loading /></el-icon></div>
                   
                  </div>
  </template>

  






  
  





</StatisticsGrid>

</template>

<script setup lang="ts" name="caseTwo">
import { onBeforeMount, watch,ref, reactive, onMounted, getCurrentInstance, nextTick  } from "vue";
import StatisticsGrid from "@/components/StatisticsGrid/index.vue";
import ECharts from "@/components/ECharts/index.vue";
const echartsRefMap = ref({});
const handleSetFromMap = (el, item) => {
  if (el) {
    echartsRefMap.value[`echarts_Ref_${item.contentData.name}`] = el;
  }
};

const changeEchartFun=(block_item)=>{
   console.log('自己处理吧！！！！')
   console.log(block_item)
   

  //  console.log(echartsRefMap.value)
  // echartsRefMap.value[`echarts_Ref_${chart}`].resize();
}



const value = ref('Option1')
const options = [
  {
    value: 'Option1',
    label: '全站',
  },
  {
    value: 'Option2',
    label: '俄境内标准订单',
  },
  {
    value: 'Option3',
    label: '跨境直供',
  },
  {
    value: 'Option4',
    label: '跨境拼单',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]



const layout = ref([
  {
  
    geturl:'/statistics/open-order/amount',
    echartsRef:['chart1'],
    is_need_show:true,//是否需要珍珍处理
    contentData:{
      type:'echart',
      name:'chart1',
      echartData:{},
    },
    id:"block_gvm",
    i:"block_gvm",
    x: 0,
    y: 0,
    w: 8,
    h: 10,
    class: "has_blue_line",
    tit: "销售额",
    minW: "",
    minH: "",
    maxW: "",
    maxH: "",
  },
 { 
  is_need_show:false,
  geturl:'',
  echartsRef:[],
  i:"block_bbb",
  x: 8, y: 0, w: 4, h: 10,id:"block_bbb", class: "", name: "在售商品型号", minW: "", minH: "", maxW: "", maxH: "",
  contentData:{
      aa:'',
      bb:'',
      echartData:{}}

  },
  {
  
    geturl:'/statistics/open-order/amount',
    echartsRef:['block_uv_chart1'],
    is_need_show:true,//是否需要珍珍处理
    contentData:{
      type:'echart',
      name:'block_uv_chart1',
      echartData:{},
    },
    id:"block_uv",
    i:"block_uv",
    x: 0,
    y: 10,
    w: 8,
    h: 10,
    class: "has_blue_line",
    tit: "销售额111",
    minW: "",
    minH: "",
    maxW: "",
    maxH: "",
},
]);
// const layout = ref([
//   {





//     charts: {
//       title: {
//         text: "ECharts",
//         textStyle: {
//           fontSize: 14
//         }
//       },
//       tooltip: {},
//       legend: {
//         data: ["销量"]
//       },
//       xAxis: {
//         data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
//       },
//       yAxis: {},
//       series: [
//         {
//           name: "销量",
//           type: "bar",
//           data: [5, 20, 36, 10, 10, 20]
//         }
//       ]
//     },

//     x: 0,
//     y: 0,
//     w: 8,
//     h: 10,
//     i: "0",
//     class: "has_blue_line",
//     name: "销售额",
//     minW: "",
//     minH: "",
//     maxW: "",
//     maxH: "",
//     activeName: "first"
//   },
//   {
//     charts: {
//       title: {
//         text: "Chart",
//         textStyle: {
//           fontSize: 12
//         }
//       },
//       tooltip: {
//         trigger: "axis",
//         axisPointer: {
//           type: "cross",
//           label: {
//             backgroundColor: "#6a7985"
//           }
//         }
//       },
//       legend: {
//         data: ["Email", "Union Ads", "Video Ads"]
//       },
//       toolbox: {
//         feature: {
//           saveAsImage: {}
//         }
//       },
//       grid: {
//         left: "3%",
//         right: "4%",
//         bottom: "3%",
//         containLabel: true
//       },
//       xAxis: [
//         {
//           type: "category",
//           boundaryGap: false,
//           data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
//         }
//       ],
//       yAxis: [
//         {
//           type: "value"
//         }
//       ],
//       series: [
//         {
//           name: "Email",
//           type: "line",
//           stack: "Total",
//           areaStyle: {},
//           emphasis: {
//             focus: "series"
//           },
//           data: [120, 132, 101, 134, 90, 230, 210]
//         },
//         {
//           name: "Union Ads",
//           type: "line",
//           stack: "Total",
//           areaStyle: {},
//           emphasis: {
//             focus: "series"
//           },
//           data: [220, 182, 191, 234, 290, 330, 310]
//         },
//         {
//           name: "Video Ads",
//           type: "line",
//           stack: "Total",
//           areaStyle: {},
//           emphasis: {
//             focus: "series"
//           },
//           data: [150, 232, 201, 154, 190, 330, 410]
//         }
//       ]
//     },
//     x: 8,
//     y: 0,
//     w: 4,
//     h: 10,
//     i: "1",
//     minW: "",
//     minH: "",
//     name: "订单量",
//     class: "",
//     maxW: "",
//     maxH: ""
//   },
//   {
//     x: 0,
//     y: 10,
//     w: 6,
//     h: 8,
//     i: "2",
//     name: "在售品类",
//     class: "",
//     minW: "",
//     minH: "",
//     maxW: "",
//     maxH: ""
//   },
//   { x: 6, y: 10, w: 6, h: 8, i: "3", name: "我有最小宽度和最小高度", class: "", minW: 1, minH: 3, maxW: "", maxH: "" },
//   { x: 0, y: 18, w: 2, h: 5, i: "4", name: "", class: "", name: "在售品类", minW: "", minH: "", maxW: "", maxH: "" },
//   { x: 6, y: 18, w: 3, h: 5, i: "5", class: "", minW: "", name: "在售对象", minH: "", maxW: "", maxH: "" },
//   { x: 9, y: 18, w: 3, h: 5, i: "6", name: "在售商品型号", class: "has_blue_line", minW: "", minH: "", maxW: "", maxH: "" },
//   { x: 0, y: 20, w: 3, h: 6, i: "7", name: "我有最大宽度和最大高度", class: "", minW: "", minH: "", maxW: 10, maxH: 5 },
//   {
//     charts: {
//       xAxis: {
//         type: "category",
//         data: ["Mon", "Tue"]
//       },
//       yAxis: {
//         type: "value"
//       },
//       series: [
//         {
//           data: [45, 60, 80],
//           type: "line"
//         }
//       ]
//     },
//     x: 3,
//     y: 20,
//     w: 3,
//     h: 6,
//     i: "8",
//     class: "",
//     name: "SPU上架",
//     minW: "",
//     minH: "",
//     maxW: "",
//     maxH: ""
//   },
//   { x: 6, y: 20, w: 3, h: 6, i: "9", class: "", name: "在售商品型号", minW: "", minH: "", maxW: "", maxH: "" },
//   { x: 9, y: 20, w: 3, h: 6, i: "10", class: "", name: "在售商品型号", minW: "", minH: "", maxW: "", maxH: "" }
// ]);

</script>

<style  lang="scss">
@import "./index.scss";
@import "@/components/StatisticsGrid/index.scss";
</style>
